<template>
  <div class="list-box" ref="listBox">
    <!-- 搜索区-->
    <div class="list-search">
      <!-- <div class="list-ready-box">待处理文章数量：{{total}}</div> -->
      <div class="list-search-box">
        <span>栏目：</span>
        <el-radio-group v-model="columnSearch" @change="changeColumn()" style="width: 90%;">
          <el-radio label="">全部</el-radio>
          <el-radio v-for="item in columnList" :key="item.cId" :label="item.cId">{{item.columnTitle}}</el-radio>
        </el-radio-group>
      </div>
    </div>


    <!--列表区-->
    <div class="list-table">
      <el-table :data="tableData" border :style="{width: '100%'}" v-loading="loading" :height="clientHeight">
        <el-table-column prop="newsTitle" label="主标题">
          <template slot-scope="scope">
            <span @click="onClickOpenChange(scope.row)" class="list-table-tit-hover">{{scope.row.newsTitle}}</span>
          </template>
        </el-table-column>
        <el-table-column label="查看图片" width="100">
          <template slot-scope="scope">
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover">
              <img :src="scope.row.newsPicVedio_w" alt="" style="width:150px">
              <p slot="reference" class="list-table-watch-img">查看图片</p>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="columnTitle" label="所在栏目" width="100"></el-table-column>
        <el-table-column prop="newsType" label="类型" width="100"></el-table-column>
        <el-table-column prop="trueName" label="供应商" width="250"></el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.useState==='1'?'success':scope.row.useState==='2'?'danger':'info'">{{scope.row.useState==='1'?'录用发布':scope.row.useState==='2'?'待处理':'不录用'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300" fixed="right">
          <template slot-scope="scope">
            <div class="btn-box">
              <el-button class="list-table-button" type="success" size="mini" @click="setUseStateByNewsId(scope.row,1)" :disabled="scope.row.useState==='1'?true:false">录用</el-button>
              <el-button type="danger" size="mini" @click="setUseStateByNewsId(scope.row,3)" :disabled="scope.row.useState==='3'?true:false">不录用</el-button>
              <el-button :type="scope.row.isTop==='0'?'':'primary'" size="mini" @click="setIsTopByNewsId(scope.row)">{{scope.row.isTop==='0'?'取消置顶':'置顶'}}</el-button>
            </div>
            <div class="btn-box">
              <el-button type="primary" size="mini" @click="onClickPreview(scope.row)">预览</el-button>
              <el-button type="primary" size="mini" @click="onClickOpenChange(scope.row)">修改</el-button>
              <el-button type="danger" size="mini" @click="onClickOpenDelete(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--分页区-->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :pageSize="pageSize"
      class="list-pagination"
      @current-change="changePage">
    </el-pagination>


  </div>
</template>

<script>
  import phone from '../components/phone'
  export default {
    name: "zlhwReadyList",
    components:{
      phone
    },
    props:{
      userList:{
        type:Array
      },
      columnList:{
        type:Array
      },
      clientHeight:{
        type:String | Number
      }
    },
    data(){
      return{
        newsTitle:'',//标题搜索
        columnSearch:'',//栏目搜索
        userSearch:'',//供应商搜索
        useStateSearch:'2',//状态搜索

        tableData:[],

        currIndex:1,
        pageSize:8,
        total:0,
        loading:false,//是否开启加载
        rules:{

        }
      }
    },
    created(){
      this.getUserList();
    },
    methods:{
      //获取列表
      getUserList(){
        this.loading = true;
        this.$axios.getZlhwList({
          "currIndex":this.currIndex,
          "pageSize":this.pageSize,
          "cId":this.columnSearch,
          "newsTitle":this.newsTitle,
          "userId":this.userSearch,
          "useState":this.useStateSearch
        }).then(res=>{
          if (res.data.code==='0'){
            let list = res.data.data[0];
            this.total = list.totalCount;
            this.tableData = list.newsList;
            //console.log(this.tableData);
            let t = setTimeout(()=>{
              this.loading = false;
              clearTimeout(t);
            },500)
          }else{
            this.$message.error('获取文章列表失败！');
          }
        })
      },
      //修改栏目
      changeColumn(){
        this.currIndex = 1;
        this.getUserList();
      },
      //打开修改窗口
      onClickOpenChange(row){
        this.$router.push({
          path:'/addArticle/' + row.newsId,
        })
        let tabsList = JSON.parse(sessionStorage.getItem('tabsList'));
        tabsList.push({tit:`“${row.newsTitle}”文章修改`,route:'/addArticle/' + row.newsId});
        this.$emit('openAdd',tabsList);
      },
      //切换页码
      changePage(p){
        this.currIndex = p;
        this.getUserList();
      },
      //打开删除框
      onClickOpenDelete(row){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          this.$axios.deleteNewsInfo({
            "newsId":row.newsId
          }).then((res)=>{
            if (res.data.code==='1') return;
            this.getUserList();
            this.$message.success('删除成功！');
            this.$emit('changeList');
          }).catch(()=>{this.$message.error('连接服务器失败，请检查网络！')})
        })
      },
      //采用不采用
      setUseStateByNewsId(row,type){
        this.$axios.setListByNewsId({
          "newsId":row.newsId,
          "useState":type,
        }).then((res)=>{
          if (res.data.code==='1') return;
          this.getUserList();
        }).catch(()=>{this.$message.error('连接失败，请检查你的网络！')})
      },
      //置顶
      setIsTopByNewsId(row){
        this.$axios.setListByNewsId({
          "newsId":row.newsId,
          "isTop":row.isTop==='0'?'1':'0'
        }).then((res)=>{
          if (res.data.code==='1') return;
          this.getUserList();
        }).catch(()=>{this.$message.error('连接失败，请检查你的网络！')})
      },
      //点击预览
      onClickPreview(row){
        if (!row.newsUrl) {
          this.$message.warning('暂无链接！');
          return;
        };
        window.open(row.newsUrl);
      }
    }
  }
</script>

<style scoped lang="scss">
  .list-box{
    background: #fff;
    height: 100%;
    width: 100%;
    padding: 30px;
    font-size: 14px;
    .list-ready-box{
      width: 200px;
      height: 50px;
      border: 1px solid rgba(0,0,0,.2);
      border-radius: 20px;
      text-align: center;
      line-height: 50px;
    }
    .list-search-box{
      margin: 30px 0;
      display: flex;
      flex-flow: row nowrap;
      align-items:flex-start;
    }
    .list-search-input{
      width: 300px;
    }
    .list-table{
      margin: 30px 0;
      .list-table-tit-hover{
        &:hover{
          cursor: pointer;
        }
      }
      .list-table-button{
        margin-bottom: 10px;
      }
      .list-table-watch-img{
        cursor: pointer;
      }
    }
    .list-pagination{
      float: right;
      height: 50px;
    }
    .list-dialog-input{
      max-width: 500px;
    }
    .list-dialog-divider{
      margin-top: 50px;
    }
    .list-add{
      float: right;
    }
  }
</style>
